<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h3>商品列表</h3>
		<hr>
		<!-- table>(thead>tr>th*4)+tbody>tr>td>img -->
		<table border="1" width="100%">
			<thead>
				<tr>
					<th>编号</th>
					<th>标题</th>
					<th>单价</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="tbody"> 
				<tr>
					<td colspan="4" align="center">
						<img src="./img/loading.gif" width="100">
					</td>
				</tr>
				<!-- <tr>
					<td>1</td>
					<td>名称</td>
					<td>3000</td>
					<td><a href="#">删除</a></td>
				</tr>
				<tr>
					<td>2</td>
					<td>名称</td>
					<td>3000</td>
					<td><a href="#">删除</a></td>
				</tr>
				<tr>
					<td>3</td>
					<td>名称</td>
					<td>3000</td>
					<td><a href="#">删除</a></td>
				</tr> -->
			</tbody>
		</table>
		<script>
			//自定义一个全局函数，用于向服务器提交要删除的商品的编号
			function  deleteProduct( lid ) {
				console.log('即将删除商品：', lid)
				//1
				let xhr = new XMLHttpRequest()
				//2
				xhr.open('DELETE', '/v2/product/remove?lid='+lid)
				//3
				xhr.onload = function(){
					console.log(xhr.responseText)
				}
				//4
				xhr.send()
			}
			
			
			
			//为“窗口内容加载完成”事件指定处理方法
			//onclick、onblur、onchange、onload
			window.onload = function(){
				console.log('窗口中的静态页面内容加载完成')
				//向服务器发起异步的动态数据请求，获取商品数据
				//创建对象
				let xhr = new XMLHttpRequest()				
				//打开连接
				xhr.open('GET', '/v2/product/listbypage?pageSize=5&pageNum=3')
				//准备处理
				xhr.onload = function(){
					//console.log( typeof(xhr.responseText) )	//string
					//console.log( xhr.responseText )
					//JSON反序列化： JSON字符串 => JS对象
					let data = JSON.parse( xhr.responseText )
					//console.log( typeof(data) )   			//object
					//console.log( data )
					//根据data里的数据，拼接创建多个tr>td*4
					let html = ''   //用于保存要拼接的HTML片段
					for(let i=0; i<data.length; i++){
						let  p = data[i]	//从数组中取出第i个数据——就是一个商品
						html += `
							<tr>
								<td>${p.lid}</td>
								<td>${p.title}</td>
								<td>${p.price}</td>
								<td><a href="javascript: deleteProduct(${p.lid})">删除</a></td>
							</tr>
						`
					}
					console.log(html)
					tbody.innerHTML = html  //把拼接好的字符串放置到页面中
				}
				//发送请求
				xhr.send()
			}
		</script>
	</body>
</html>
